<template>

<div class="wrapper">
  <div class="banner_comment">
      <div class="comment_l">
        <div class="comment_l_one">
          <p class="top"><span class="top_one">5.0分</span><span class="top_two">超赞</span></p>
          <p class="bottom"><span>67321条评论</span><span>2671条攻略</span></p>
        </div>
        <div class="comment_l_two">
          <span class="iconfont">&#xe633;</span>

        </div>
      </div>
      <div class="comment_r">
        <div class="comment_r_one">
          <p class="top"><span>景点简介</span></p>
          <p class="bottom"><span>开放时间、贴士</span></p>
        </div>
        <div class="comment_r_two">
          <span class="iconfont">&#xe633;</span>
        </div>
      </div>
    </div>

    <div class="detail_position">
      <span class="iconfont">&#xe611;</span>
      北京市密云县古北口镇司马台村古北水镇
      <span class="iconfont active" >&#xe633;</span>
    </div>
    <div class="list">
      <ul v-for="(item,index) in categoryList" >
        <li>
          <span></span>
          {{item.title}}
        </li>
        <li v-if="item.children" v-for="(val,index) in item.children" >

          {{val.title}}
        </li>

      </ul>

    </div>
</div>
</template>

<script>
    export default {
        name: "List",
        props:{
          categoryList:Array
        }

    }
</script>

<style lang="stylus" scoped>
  .banner_comment{
    display:flex;
    padding:.1rem .03rem .1rem .03rem;
    border-bottom:1px solid #cacaca;
    .comment_l{
      width:55%;
      display:flex;

      border-right:1px solid #cacaca;

      .comment_l_one{

        .top{
          padding:.1rem 0 .1rem .1rem;
          color:orange;
          .top_one{
            font-size:.2rem;
            margin-right:.1rem;
          }
          .top_two{
            font-size:.15rem;
          }
        }
        .bottom{
          padding:0 0 .1rem .1rem;
          font-size:.13rem;
          color:#cacaca;
          span{
            margin-right:.1rem;
          }
        }
      }
      .comment_l_two{
        line-height:.6rem;
        font-size:.1rem;
      }
    }

    .comment_r{
      display:flex;
      width:45%;

      .comment_r_one{
        .top{
          padding:.1rem 0 .1rem .1rem;

        }
        .bottom{
          padding:0 0 .1rem .1rem;
          font-size:.13rem;
          color:#cacaca;
        }
      }
      .comment_r_two{
        line-height:.6rem;
        margin-left:.25rem;
        font-size:.1rem;
      }
    }
  }

  .detail_position{
    padding:.1rem .2rem .1rem .2rem;
    border-bottom:1px solid #cacaca;
    display:flex;
    justify-content:space-between;

  }
  .list{
    ul{
      li{
        padding:0 .01rem;
        font-size:.16rem;
        line-height:.44rem;
        height:.44rem;
        color:#333;
        text-indent:.22rem;
        border-bottom:1px solid #cacaca;
        span{
          display: inline-block;

          width: .2rem;
          height: .2rem;
          vertical-align:middle;
          background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.225rem no-repeat;

          background-size: .2rem 1.5rem;
        }
      }
    }
  }
</style>
